import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text} from '@tarojs/components'
import {AtLoadMore} from 'taro-ui'
import './member.scss'
import {user} from '../../utils/user.service'
import {MySellerItem, MySeller} from '../../utils/server.interface'
import {MY_SELLER, MY_POSTER, MY_QRCODE, TARO_ENV} from '../../constants/api'
import {getPoster} from "../../utils/poster.service";
import {http} from '../../utils/http'
import {h5Wx} from "../../utils/h5.service";
import {vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"

export default class Member extends Component {
  state: {
    loadMoreStatus: "more" | "loading" | "noMore"
    sellerList: MySellerItem[]
    mySeller: MySeller
  } = {
    loadMoreStatus: 'loading',
    sellerList: [],
    mySeller: {
      totalCount: 0,
      list: []
    }
  }

  async componentDidShow() {
    vcmonitor(this)
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        Taro.switchTab({url: '/pages/index/index'})
      }, 1500)
      return
    }
    const mySeller = await http.post(MY_SELLER, {pageNumber: 1})
    if (mySeller) {
      if (mySeller.list.length === 20) {
        this.setState({loadMoreStatus: 'more', mySeller, sellerList: mySeller.list})
      } else {
        this.setState({loadMoreStatus: 'noMore', mySeller, sellerList: mySeller.list})
      }
    }
  }

  async getData(page) {
    const mySeller = await http.post<MySeller>(MY_SELLER, {pageNumber: page})
    if (mySeller) {
      if (mySeller.list.length === 20) {
        this.setState({loadMoreStatus: 'more'})
      } else {
        this.setState({loadMoreStatus: 'noMore'})
      }
      return mySeller.list
    } else {
      this.setState({loadMoreStatus: 'noMore'})
      return []
    }
  }

  page = 1

  onPullDownRefresh() {
    Taro.stopPullDownRefresh()
  }

  async getPoster() {
    Taro.showLoading({title: '加载中...'})
    const poster = await getPoster('vip', '')
    if (poster) {
      if (process.env.TARO_ENV === "weapp") {
        try {
          const ret = await Taro.getImageInfo({src: poster.url})
          if (ret) {
            Taro.navigateTo({
              url: '/distributor/poster/poster?url=' + ret.path
            })
          }
        } catch (e) {
          Taro.showToast({title: '获取海报失败', icon: 'none'})
        }
      } else {
        Taro.navigateTo({
          url: '/distributor/poster/poster?url=' + poster.url
        })
      }
    }
    setTimeout(() => {
      Taro.hideLoading()
    }, 100)
  }

  async myPoster() {
    Taro.showLoading({title: '加载中...'})
    const ret = await http.post<string>(MY_POSTER, {})
    if (ret) {
      if (process.env.TARO_ENV === 'h5') {
        if (ret) {
          Taro.navigateTo({
            url: '/distributor/poster/poster?url=' + ret
          })
        }
      } else {
        try {
          const res = await Taro.getImageInfo({src: ret,})
          if (res) {
            Taro.navigateTo({
              url: '/distributor/poster/poster?url=' + res.path
            })
          }
        } catch (e) {
        }
      }
    }
    setTimeout(() => {
      Taro.hideLoading()
    }, 100)
  }

  async myQrcode() {
    Taro.showLoading({title: '加载中...'})
    const ret = await http.post<{ qrcode: string; name: string }>(MY_QRCODE, {})
    if (ret) {
      if (process.env.TARO_ENV === 'h5') {
        Taro.navigateTo({
          url: '/distributor/poster/poster?url=' + ret.qrcode
        })
      } else {
        try {
          const res = await Taro.getImageInfo({src: ret.qrcode,})
          if (res) {
            Taro.navigateTo({
              url: '/distributor/poster/poster?url=' + res.path
            })
          }
        } catch (e) {
          Taro.showToast({title: e, icon: 'none'})
        }

      }

    } else {
      Taro.showToast({title: '操作失败', icon: 'none'})
    }
    setTimeout(() => {
      Taro.hideLoading()
    }, 100)
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'}, async () => {
        this.page++
        const sellerList = await this.getData(this.page)
        const old = this.state.sellerList
        if (sellerList) {
          this.setState({sellerList: [...old, ...sellerList]})
        }
      })
    }
  }

  render() {
    const {loadMoreStatus, sellerList, mySeller} = this.state
    return (
      <View className='member-root'>
        <GzhAuth />
        <View className='member-top'>
          <View className='total'>
            <Text className='total-number'>{mySeller && mySeller.totalCount || 0}</Text>
            <Text className='total-p'>人</Text>
          </View>
          <View className='tips'>我的用户总数</View>
          <View className='link-box'>
            <View className='link-box-poster' onClick={this.getPoster.bind(this)}>发展用户海报</View>
          </View>
          <View className='tips'>分享专属海报或小程序码绑定用户</View>
        </View>
        <View className='list-box'>
          {sellerList.map(item => <View className='list-item' key={item.temprownumber}>
            <View className='name'>{item.nick_name}</View>
            <View className='count'>访问{item.login_count}次</View>
          </View>)}
        </View>
      </View>
    )
  }
}
